<template>
    <el-row class="tac">
        <el-col :span="12">
            <el-menu active-text-color="#ffd04b" background-color="#545c64" :router="true" class="el-menu-vertical-demo"
                default-active="/" text-color="#fff" @open="handleOpen" @select="selectFn" @close="handleClose">
                <el-menu-item index="/">
                    <!-- <el-icon><icon-menu /></el-icon> -->
                    <img class="img" v-if="one == 1" src="/src/status/tabbar/1.png" alt="">
                    <img class="img" v-else src="/src/status/tabbar/12.png" alt="">
                    <span>热点事件</span>
                </el-menu-item>
                <el-menu-item index="/tow">
                    <img class="img" v-if="tow == 1" src="/src/status/tabbar/seh.png" alt="">
                    <img class="img" v-else src="/src/status/tabbar/seh2.png" alt="">
                    <span>数据查搜</span>
                </el-menu-item>
                <el-menu-item index="/stree">
                    <img class="img" v-if="stree == 1" src="/src/status/tabbar/3.png" alt="">
                    <img class="img" v-else src="/src/status/tabbar/32.png" alt="">
                    <span>数据分析</span>
                </el-menu-item>
                <el-menu-item index="/four">
                    <img class="img" v-if="four == 1" src="/src/status/tabbar/4.png" alt="">
                    <img class="img" v-else src="/src/status/tabbar/42.png" alt="">
                    <span>我的采集</span>
                </el-menu-item>
                <el-menu-item index="/five">
                    <img class="img" v-if="five == 1" src="/src/status/tabbar/5.png" alt="">
                    <img class="img" v-else src="/src/status/tabbar/52.png" alt="">
                    <span>流量统计</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script  setup>
import {
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
let one = ref('2')
let tow = ref('1')
let stree = ref('1')
let four = ref('1')
let five = ref('1')
const handleOpen = () => {
    // console.log('123456')
}
// onMounted(() => {
//     localStorage.setItem('path', '/')
// })

const handleClose = () => {
    // console.log('456789')
}
const selectFn = (e) => {
    localStorage.setItem('path', '/')
    if (e == '/') {
        localStorage.setItem('path', '/')
    } else if (e == '/tow') {
        localStorage.setItem('path', '/tow')
    } else if (e == '/stree') {
        localStorage.setItem('path', '/stree')
    } else if (e == '/four') {
        localStorage.setItem('path', '/four')
    } else if (e == '/five') {
        localStorage.setItem('path', '/five')
    }
    if (e != '/') {
        one.value = 1
    } else if (e == '/') {
        one.value = 2
    }
    if (e != '/tow') {
        tow.value = 1

    } else if (e == '/tow') {
        tow.value = 2
    }
    if (e != '/stree') {
        stree.value = 1
    } else if (e == '/stree') {
        stree.value = 2
    }
    if (e != '/four') {
        four.value = 1

    } else if (e == '/four') {
        four.value = 2
    }
    if (e != '/five') {
        five.value = 1
    } else if (e == '/five') {
        five.value = 2
    }
}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 14.4) * 1vw;
}

.img {
    width: pxfn(15);
    height: pxfn(15);
    margin-right: pxfn(5);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    min-width: pxfn(150);
    // min-height: pxfn(400);
    // width: pxfn(230);
    // width: pxfn(200);
    min-height: 400px;
}

.el-menu-vertical-demo {
    min-height: 0 !important;
}



.mb-2 {
    width: pxfn(200);
    height: pxfn(60);
    text-align: center;
    line-height: pxfn(60);
    background-color: pink;
    margin: 0;
}

.el-col-12 {
    max-width: 100%;
}

// ::v-deep .el-container {
</style>